﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TimeCalculator</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- TimeCalculator references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="js/Controls/TimeCalculatorControl.js"></script>
    <script src="/js/default.js"></script>
</head>
<body>
    <fieldset id="timeControl">
        <legend><h2>Calculate the time</h2></legend>

        <div id="enableTime" data-win-control="WinJS.UI.ToggleSwitch"></div>

        <label for="firstDate">Choose your start date</label>
        <div id="firstDate" data-win-control="WinJS.UI.DatePicker"></div>

        <label for="secondDate">Choose your end date</label>
        <div id="secondDate" data-win-control="WinJS.UI.DatePicker"></div>

        <div id="time">
            <label for="startTime">Choose your start time</label>
            <div id="startTime"></div>

            <label for="endTime">Choose your end time</label>
            <div id="endTime"></div>
        </div>

        <button id="options-button">Open</button>
        <div id="submit-options" data-win-control="WinJS.UI.Menu", data-win-options="{anchor:'options-button'}">
            <button id="calcDays" data-win-control="WinJS.UI.MenuCommand" data-win-options="{label:'Calculate Days'}"></button>
            <button id="calcHours" data-win-control="WinJS.UI.MenuCommand" data-win-options="{label:'Calculate Hours'}"></button>
            <button id="calcDaysAndHours" data-win-control="WinJS.UI.MenuCommand" data-win-options="{label:'Calculate Days and Hours'}"></button>
        </div>
    </fieldset>

    <div id="output"></div>
</body>
</html>
